<template>
  <div class="newUpToDownOrganization">
    <div class="contentTopTitle">
      <div class="fl">
        <div class="title">2023自上而下编制</div>
      </div>
    </div>
    <div>
      <el-form inline :model="form" label-width="70px" size="mini" style="margin-top:10px">
        <el-form-item label="年份">
          <el-date-picker
            v-model="form.year"
            type="year"
            placeholder="选择年"
            value-format="yyyy"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="区域">
          <dx-cascader
            :area_id.sync="form.areaId"
            :area_name.sync="form.areaName"
            :area_lvl.sync="form.areaLvl"
            ref="cascader"
          />
        </el-form-item>
        <el-form-item>
          <el-button size="small" type="primary" @click="search"
            >查询</el-button
          >
          <el-button size="small" type="primary" @click="handle_export"
            >导出</el-button
          >
          <el-button size="small" type="warning" @click="$router.push('/budget/downToUpTrends2023/export')"
            >外部导入</el-button
          >
        </el-form-item>
      </el-form>
    </div>
    <div class="tableBox" style="margin-top: 10px">
      <el-table
        v-loading="tableLoading"
        :data="tableData"
        style="width: 100%"
        class="tableTh28"
        border
        stripe
        ref="table"
        :height="tableHeight+''"
        :span-method="spanMethod"
      >
        <el-table-column
          v-for="item in column"
          :key="item.prop"
          :label="item.label"
          :prop="item.prop"
          :min-width="item.minWidth"
        ></el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import { getCookie } from "@/common/js/cookie";
import { getSessionStorage } from "@/common/js/storage";
import { $budgetAPI } from "@/api";
import { mergeSpan } from "@/utils/mixin";
import { downLoadExcelParams } from "@/utils/zipdownload.js"
export default {
  data() {
    return {
      form: {
        year: "2023",
        areaId: "",
      },
      tableLoading: false,
      tableData: [],
      // keys: [],
      column: [],
      spanArr: [],
      tableHeight: window.innerHeight - 216,
    };
  },
  created() {
    this.form.areaId = JSON.parse(getSessionStorage("accountInfo")).areaId;
    window.addEventListener("resize", this.resizeTable);
    this.getData();
  },
  beforeDestroy(){
    window.removeEventListener("resize", this.resizeTable);
  },
  methods: {
    //查询
    search() {
      this.getData();
    },
    getData() {
      this.tableLoading = true;
      $budgetAPI.selectBudgetMaking(
        { token: getCookie("token"), areaId: this.form.areaId, year: this.form.year },
        (res) => {
          // this.alertError(res);
          if (res.code == 0) {
            const { data, keys, heads } = res.content;
            this.tableData = data;
            this.column = keys.map((it,i) => {
              return {
                prop: it,
                label: heads[i],
                minWidth: this.setWidth(it)
              }
            });
            this.spanArr = mergeSpan(this.tableData, ['class1', 'class2']);
          };
          this.tableLoading = false;
        },
        (err) => {
          // this.alertError(err);
          this.tableLoading = false;
        }
      );
    },
    setWidth(prop){
      if(prop === 'class1' || prop === 'class2' || prop === 'indexWeight') return '70';
      if(prop === 'verticalIndexName') return '80';
      if(prop === 'conditionExpress') return '85';
      return '110';
    },
    handle_export(){
      downLoadExcelParams(
        // "/compileIncome/exportBudgetMaking", 
        "/compileIncome/exportBudgetcalCulation", 
        { token: getCookie("token"), areaId: this.form.areaId, year: this.form.year },
        "2023自上而下编制"
      )
    },
    spanMethod({ rowIndex, columnIndex }){
      if(columnIndex <= 1){
        return this.spanArr[rowIndex][columnIndex];
      }
    },
    resizeTable(){
      this.tableHeight = window.innerHeight - 216;
      this.$nextTick(() => { this.$refs.table.doLayout(); });
    },
  },
};
</script>
<style lang="scss" scoped>
  /deep/ .el-form-item__label {
		font-size: 13px;
		padding-right: 10px;
		line-height: 32px !important;
	}
  /deep/ .el-table {
    .el-table__row {
      td {
        padding: 0 !important;
      }
      .cell {
        padding: 2px 0 !important;
        font-size: 12px !important;
        // zoom: 0.9;
      }
    }
  }
</style>